<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}" />
    <title>操作日志</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
    <div class="app-page">
        <div class="app-page-header">
            <div class="page-title">
                <div class="title">日志</div>
            </div>
        </div>

        <div class="app-page-content">
            <div class="app-card z-mab">
                <div class="app-card-body">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">开始时间</div>
                                    <div class="body">
                                        <input type="text" name="startTime" class="flatpickr-datetime">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">结束时间</div>
                                    <div class="body">
                                        <input type="text" name="endTime" class="flatpickr-datetime">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="app-card">
                <div class="app-card-body">
                    <table class="z-table">
                        <thead>
                            <th>ID</th>
                            <th>模块</th>
                            <th>动作</th>
                            <th>管理员</th>
                            <th class="z-center">成功</th>
                            <th>时间</th>
                        </thead>
                        <tbody>
                            <tr th:each="operationLog: ${operationLogList}">
                                <td th:text="${operationLog.operationLogId}"></td>
                                <td th:text="${operationLog.operationTypeName}"></td>
                                <td th:text="${operationLog.operationContent}"></td>
                                <td th:text="${operationLog.userName}"></td>
                                <div th:switch="${operationLog.isSuccess}">
                                    <td th:case="'1'" class="z-center" style="color: #18da18;"><i class="fa fa-check"></i></td>
                                    <td th:case="'0'" class="z-center" style="color: #gray;"><i class="fa fa-close"></i></td>
                                </div>
                                <td th:text="${operationLog.operationTime}"></td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 分页信息 -->
                    <div class="app-card-body">
                        <!-- 前端分页 -->
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/lib/jquery.min.js}"></script>
    <script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
    <script th:src="@{/js/form.js}"></script>
    <script th:src="@{/js/admin/app.js}"></script>
    <script th:src="@{/js/pagination.js}"></script>
    <script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
    <script th:src="@{/lib/flatpickr/zh.js}"></script>
    <script>
        //处理时间查询条件
        // 从URL加载搜索数据
        $(".filter").formLoad(App.query);

        flatpickr.localize(flatpickr.l10ns.zh);
        flatpickr(".flatpickr-datetime", {
            enableTime: true,
            enableSeconds: true,
        });
    </script>
    <script type="text/javascript" th:inline="javascript">
        //获取context path
        var context = $("meta[name='ctx']").attr("content") || '';
        var pageNum =  [[${pageNum}]];
        var pageSize = [[${pageSize}]];
        var total = [[${total}]];
        var startTime = $("input[name='startTime']").val();
        var endTime = $("input[name='endTime']").val();
        var pagination = new Pagination(".pagination", {
            pageIndex: pageNum, // 当前页数
            pageSize: pageSize, // 每页数量
            count: total, // 总条数
            maxButtonCount: 5, // 分页按钮数量(可选)
            // 分页切换事件
            onPageChanged: function(pageIndex) {
                window.location.href = context + "/operationLog/list?pageNum=" + pageIndex + "&pageSize=" + pageSize
                    + "&startTime=" + startTime + "&endTime=" + endTime;
            }
        })
    </script>
</body>

</html>